import { ref } from "vue";

export const handle_operate_list = ({ pv_sum = "", uv_sum = "" }) => {
  return [
    {
      svgName: "zhinan",
      number: pv_sum,
      unit: "",
      iconColor: "#ea9518",
      subTitle: "访问流量总计",
    },
    {
      svgName: "jiansuo",
      number: uv_sum,
      unit: "",
      iconColor: "#70b483",
      subTitle: "访问用户总计",
    },
  ];
};

export const handle_service_list = ({
  add_complain,
  add_help,
  add_news,
  add_question,
  operation_complain,
  operation_help,
  operation_question,
}) => {
  return [
    {
      svgName: "feijian",
      number: add_complain,
      unit: "",
      iconColor: "#f46866",
      subTitle: "新增投诉举报数",
    },
    {
      svgName: "biaoge",
      number: add_help,
      unit: "",
      iconColor: "#5e62f4",
      subTitle: "新增维权援助数",
    },
    {
      svgName: "shenqing",
      number: add_news,
      unit: "",
      iconColor: "#f4cf5e",
      subTitle: " 新增信息资讯",
    },
    {
      svgName: "home",
      number: add_question,
      unit: "",
      iconColor: "#56aae7",
      subTitle: "新增用户咨询",
    },
    {
      svgName: "copyright",
      number: operation_complain,
      unit: "",
      iconColor: "#ffd04b",
      subTitle: "投诉举报审核操作数",
    },
    {
      svgName: "prompt",
      number: operation_help,
      unit: "",
      iconColor: "#35ce8f",
      subTitle: "维权援助审核操作数",
    },
    {
      svgName: "piaoju",
      number: operation_question,
      unit: "",
      iconColor: "#a973f2",
      subTitle: "用户咨询审核操作数",
    },
  ];
};

export const lineOption = ref({
  title: {
    text: "区间每日流量统计列表",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params: any) {
      // return `${params[0].name}年：</br>${params[0].seriesName}: ${params[0].data} 项</br>${params[1].seriesName}: ${params[1].data} 项`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    data: [],
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      name: "",
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});

export const lineOption2 = ref({
  title: {
    text: "区间每日用户统计列表",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params: any) {
      // return `${params[0].name}年：</br>${params[0].seriesName}: ${params[0].data} 项</br>${params[1].seriesName}: ${params[1].data} 项`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    data: [],
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      name: "",
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});
export const lineOption3 = ref({
  title: {
    text: "大数据中心访问流量统计列表",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params: any) {
      // return `${params[0].name}年：</br>${params[0].seriesName}: ${params[0].data} 项</br>${params[1].seriesName}: ${params[1].data} 项`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    data: [],
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      name: "",
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});
export const lineOption4 = ref({
  title: {
    text: "信息资讯访问流量统计列表",
    textStyle: {
      color: "#000",
      fontSize: 20,
    },
    left: "center",
    subtextStyle: {
      color: "#000",
      fontSize: 14,
      fontWeight: "normal",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    formatter: function (params: any) {
      // return `${params[0].name}年：</br>${params[0].seriesName}: ${params[0].data} 项</br>${params[1].seriesName}: ${params[1].data} 项`;
    },
  },
  legend: {
    orient: "horizontal", //布局方式：  horizontal/vertical
    x: "900", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
    y: "top", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
    textStyle: {
      // 图例文字大小颜色
      fontSize: 18,
      color: "#000",
    },
    data: [],
    backgroundColor: "rgba(0,0,0,0)",
    borderColor: "#ccc", // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5，或数组形式分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "category",
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      type: "value",
    },
  ],
  dataZoom: [
    {
      show: true,
      textStyle: {
        color: "#fff", //滚动条两边字体样式
        fontSize: "20px",
      },
      xAxisIndex: 0,
      filterMode: "none",
      startValue: 34,
      endValue: 44,
    },
  ],
  series: [
    {
      name: "",
      axisLabel: {
        textStyle: {
          color: "#000",
        },
      },
      label: {
        show: true,
        color: "#000",
      },
      data: [],
      type: "line",
    },
  ],
});

export const type = {
  "近一周":"week",
  "近半月":"half_month",
  "近一个月":"month",
  "近半年":"half_year",
  "近一年":"year",
}